<script setup lang="ts">
import { getContent } from '@/api/api'
import { ref, onBeforeMount, onMounted, onUnmounted } from 'vue'
// 从后端获得的数据
interface ApiResponse {
  code: string
  msg: string
  data: {
    title: string
    content: string
    imageUrl: string
  }[]
}

const contentList = ref<ApiResponse['data']>([])
onBeforeMount(async () => {
  const res = await getContent()
  contentList.value = res.data
})
// 堆叠式轮播图
const currentSlide = ref<number>(0)
const slideLeft = () => {
  if (currentSlide.value > 0) {
    currentSlide.value--
  } else {
    currentSlide.value = 6
  }
}
const slideRight = () => {
  if (currentSlide.value < 6) {
    currentSlide.value++
  } else {
    currentSlide.value = 0
  }
}
const getSlideStyle = (index: number) => {
  const distance = index - currentSlide.value;
  const absDistance = Math.abs(distance);
  if (currentSlide.value === 0) {
    if (index === 6) {
      return {
        transform: "translateX(-21.5%) scale(0.8)",
        opacity: 0.5,
        zIndex: 6,
      }
    }
  }
  if (currentSlide.value === 6) {
    if (index === 0) {
      return {
        transform: "translateX(21.5%) scale(0.8)",
        opacity: 0.5,
        zIndex: 6,
      }
    }
  }
  // 当前 slide
  if (distance === 0) {
    return {
      transform: "translateX(0) scale(1)",
      opacity: 1,
      zIndex: 7,
    }
  }
  // 相邻的 slide（左右各一个）
  else if (absDistance === 1) {
    return {
      transform: `translateX(${21.5 * distance}%) scale(0.8)`,
      opacity: 0.5,
      zIndex: 6,
    }
  }
  // 其他 slide
  else {
    return {
      transform: `translateX(${21.5 * distance}%) scale(0.8)`,
      opacity: 0,
      zIndex: 7 - absDistance,
    }
  }
}

// 自动轮播
let intervalId: number | null = null
const startAutoSlide = () => {
  intervalId = setInterval(slideRight, 4000)
}

const stopAutoSlide = () => {
  if (intervalId) {
    clearInterval(intervalId)
    intervalId = null
  }
}

onMounted(() => {
  startAutoSlide()
});

onUnmounted(() => {
  stopAutoSlide()
});
</script>

<template>
  <div class="all">
    <div class="enterprise">
      <span><strong>合规备案 </strong></span>
      <strong> 企业更放心！</strong>
    </div>
    <p>iSlide AI 通过国家互联网信息办公室《境内深度合成算法备案清单》第 4 批，全力保障企业、个人信息安全!</p>
    <div class="compliance">
      <div class="leftArrow" @click="slideLeft">
        <svg width="20px" height="20.00px" viewBox="0 0 1024 1024">
          <path
            d="M671.968176 911.99957c-12.287381 0-24.576482-4.67206-33.951566-14.047144L286.048434 545.984249c-18.751888-18.719204-18.751888-49.12028 0-67.872168L638.016611 126.111222c18.751888-18.751888 49.12028-18.751888 67.872168 0 18.751888 18.719204 18.751888 49.12028 0 67.872168l-318.016611 318.047574L705.888778 830.047574c18.751888 18.751888 18.751888 49.12028 0 67.872168C696.544658 907.32751 684.255557 911.99957 671.968176 911.99957z">
          </path>
        </svg>
      </div>
      <div class="content">
        <div v-for="(item, index) in contentList" :key="index" class="slideCompliance"
          :class="{ active: currentSlide === index }" :style="getSlideStyle(index)">
          <div class="itemTitle"><strong>{{ item.title }}</strong></div>
          <div class="itemContent">{{ item.content }}</div>
          <div class="itemImageUrl">
            <img :src="item.imageUrl">
          </div>
        </div>
      </div>
      <div class="rightArrow" @click="slideRight">
        <svg width="20px" height="20.00px" viewBox="0 0 1024 1024">
          <path
            d="M671.968176 911.99957c-12.287381 0-24.576482-4.67206-33.951566-14.047144L286.048434 545.984249c-18.751888-18.719204-18.751888-49.12028 0-67.872168L638.016611 126.111222c18.751888-18.751888 49.12028-18.751888 67.872168 0 18.751888 18.719204 18.751888 49.12028 0 67.872168l-318.016611 318.047574L705.888778 830.047574c18.751888 18.751888 18.751888 49.12028 0 67.872168C696.544658 907.32751 684.255557 911.99957 671.968176 911.99957z">
          </path>
        </svg>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.all {
  background-color: rgb(245, 246, 249);
  padding-top: 100px;
  overflow: hidden;
  width: 100%;
  min-width: 1300px;
}

.enterprise {
  width: 1300px;
  min-width: 1300px;
  margin: 0 auto;
  text-align: center;
  font-size: 50px;

  span {
    background-image: linear-gradient(to right, rgb(81, 168, 255), rgb(200, 90, 255));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

p {
  display: block;
  width: 1300px;
  min-width: 1300px;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 40px;
  font-size: 19px;
  margin: 0 auto;
}

.compliance {
  width: 1300px;
  min-width: 1300px;
  display: flex;
  height: 300px;
  flex-wrap: nowrap;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  padding-bottom: 100px;
  overflow: hidden;
}

.leftArrow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  background-color: #fff;
  border-radius: 50%;
  cursor: pointer;
}

.rightArrow {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-50%) rotate(180deg);
  width: 45px;
  height: 45px;
  background-color: #fff;
  border-radius: 50%;
  cursor: pointer;
}

.content {
  width: 1238px;
  height: 600px;
  display: flex;
  flex-wrap: no-wrap;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;

  >*:nth-child(1) {
    position: absolute;
    z-index: 7;
    opacity: 1;
  }

  >*:nth-child(2) {
    position: absolute;
    z-index: 6;
    transform: translateX(21.5%) scale(0.80);
    opacity: .5;
  }

  >*:nth-child(3) {
    position: absolute;
    z-index: 5;
    opacity: 0;
  }

  >*:nth-child(4) {
    position: absolute;
    z-index: 4;
    opacity: 0;
  }

  >*:nth-child(5) {
    position: absolute;
    z-index: 3;
    opacity: 0;
  }

  >*:nth-child(6) {
    position: absolute;
    z-index: 2;
    opacity: 0;
  }

  >*:nth-child(7) {
    position: absolute;
    z-index: 1;
    transform: translateX(-21.5%) scale(0.80);
    opacity: 0;
  }
}

.slideCompliance {
  width: 988px;
  height: 288px;
  background: linear-gradient(180deg, rgb(241, 243, 247), #fff);
  border-radius: 20px;
  transition:
    transform 0.3s ease,
    z-index 0.3s ease;
}

.itemTitle {
  font-size: 40px;
  padding-left: 50px;
  padding-top: 40px;
}

.itemContent {
  color: rgb(126, 133, 144);
  font-size: 16px;
  padding-top: 10px;
  padding-left: 50px;
  width: 910px;
}

.itemImageUrl {
  padding-left: 50px;
  width: 300px;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>